<template> 
	<div>
		<div v-if="chenload">
			<div class="answercon" v-if="code==0||code=='0'">
			  <!-- 题型 -->
			  <div class="answer-top clearfix">
				  <div class="answer-top-left fl" v-if="typestr==1||typestr=='1'">【A1题型】</div>
				  <div class="answer-top-left fl" v-else-if="typestr==2||typestr=='2'">【A2题型】</div>
				  <div class="answer-top-left fl" v-else-if="typestr==3||typestr=='3'">【A3/A4题型】</div>
				  <div class="answer-top-left fl" v-else-if="typestr==4||typestr=='4'">【B1题型】</div>
				  <div class="answer-top-left fl" v-else-if="typestr==5||typestr=='5'">【B2题型】</div>
				  <div class="answer-top-right fr">{{sort}}/{{item_count}}</div>
			  </div>
			  <div class='allanswer'>
				  <!-- A1/A2题型 -->
				  <div class="answer answer-A1" v-if="typestr==1||typestr=='1'||typestr==2||typestr=='2'">
					  <div class="answer-question"><span>{{sort}}</span>.<span class="qu" v-html="itemanswer.question"></span></div>
					  <div class="answer-choose">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices" @click="chooseclick(index,sort,itemanswer.answer,itemanswer.question_id,itemanswer.analysis,itemanswer.question,itemanswer.type,itemanswer.choices,'')">
							  <div class="answer-every-click fl" :class="index==n[sort-1]?'answer-choose-active':''">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
				  </div>
				  <!-- A3/A4题型 -->
				 <div class="answer answer-A3" v-if="typestr==3||typestr=='3'">
					 <div class="answer-big-que" v-html="itemanswer.stem"></div>
					  <div class="answer-question"><div class="answer-question"><span>{{sort}}</span>.<span v-html="itemanswer.question"></span></div></div>
					  <div class="answer-choose">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices" @click="chooseclick(index,sort,itemanswer.answer,itemanswer.question_id,itemanswer.analysis,itemanswer.question,itemanswer.type,itemanswer.choices,itemanswer.stem)">
							  <div class="answer-every-click fl" :class="index==n[sort-1]?'answer-choose-active':''">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
				  </div>
				  <!-- B1题型 -->
				  <div class="answer answer-B1" v-if="typestr==4||typestr=='4'">
					 <div class="answer-choose answer-choose-top">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices">
							  <div class="answer-every-click fl">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					 </div>
					  <div class="answer-question"><span>{{sort}}</span>.<span v-html="itemanswer.question"></span></div>
					  <div class="answer-choose clearfix answer-ch-click">
						  <div class="answer-choose-every fl" v-for="(item,index) in itemanswer.choices"@click="chooseclick(index,sort,itemanswer.answer,itemanswer.question_id,itemanswer.analysis,itemanswer.question,itemanswer.type,itemanswer.choices,'')">
							  <div class="answer-every-click" :class="index==n[sort-1]?'answer-choose-active':''">{{choise[index]}}</div>
						  </div>
					  </div>
				   </div>
				   
				   <!-- B2题型 -->
				   <div class="answer answer-B2" v-if="typestr==5||typestr=='5'">
					   <div class="answer-big-que" v-html="itemanswer.stem"></div>
					  <div class="answer-question"><span>{{sort}}</span>.<span class="qu" v-html="itemanswer.question"></span></div>
					  <div class="answer-choose">
						  <div class="answer-choose-every clearfix" v-for="(item,index) in itemanswer.choices" @click="choosemoreclick(index,sort,itemanswer.answer,itemanswer.question_id,itemanswer.analysis,itemanswer.question,itemanswer.type,itemanswer.choices,'')">
							  <div class="answer-every-click fl" :class="index==n[sort-1]?'answer-choose-active':''">{{choise[index]}}</div>
							  <div class="answer-every fl" v-html="item"></div>
						  </div>
					  </div>
				   </div>
			  </div>
			   
			   <!-- 底部 -->
				<div class="answer-bottom clearfix">
					<div class="bottom-left fl" @click="leftitem">
						<img src="../../../assets/image/left-push.png" alt="">
					</div>
					<div class="bottom-right fr"@click="rightitem">
						<img src="../../../assets/image/right-push.png" alt="">
					</div>
				</div>
				
				
				<!-- 提交 -->
			  <div class="shower">
				<div class="show-con">
				  <h1>试卷答完啦！</h1>
				  <p>提交试卷后，可看错题分析</p>
				  <div class="butac clearfix">
					<div class="no but" @click="clear">取消</div>
					<div class="yes but" @click="submit">提交</div>
				  </div>
				</div>
			  </div>
			  
			  <div class="noshower">
			  <!-- <div class="noshower" style="display: block;"> -->
				<div class="show-con">
				  <h1>试卷未答完</h1>
				  <p>{{nopare}}题未做</p>
				  <div class="butorder" @click="noshowerclick">确认</div>
				</div>
			  </div>

			  

			  <!-- 底部提交 -->
			  <div class="showerbottom" @click="submitbottom">
				<div class="showercontent">{{textnosub}}</div>
			  </div>
				
			</div>
			<div v-else class="noanswer">暂无试题</div>
		</div>
		<div class="loadmore" v-else>
			<img src="../../../assets/img/load.gif" alt="">
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				chenload:false,
			  	id:'',  //课程id
				gid:'',  //班级id
				test_id:'', // 试卷id
				item_count:'',  //该试卷一共有多少题
				code:'',  //是否获取到试卷
				testPaper:'',  //这套试卷的全部信息
				sort:1, //第几题
				typestr:'',  //题型
				itemanswer:'',
				choise:['A','B','C','D','E','F','G','H','I','K','L','M','N'],
				n:[],
				arranswer:{arr:[]},  //记录你的答案和正确答案
				record:{answer:[]},  //记录题目
				zbo:0,   //0回放  1直播
				submitfalse:false,
				alltiarr:[],
				urlquery:'',
				nopare:'',
				textnosub:'试卷已答完，点击提交试卷',
				noclick:false,
			};
		},
		methods: {
			// 单选
			chooseclick:function(index,ind,answer,question_id,analysis,question,type,choices,stem){
				// index 为选项的下标   ind是第几道题
				var that = this;
				Vue.set(that.n,parseInt(ind)-1,index);
				// console.log(that.n);
				
				var newaanswer = that.arranswer.arr;  //记录你的答案和正确答案
				var newrecord = that.record.answer;   //记录题目
				newaanswer[ind-1] = {'youanswer':that.choise[index],'answer':answer};
				// console.log(newaanswer[ind-1]);
				if(that.choise[index] == answer){
				 newrecord[ind-1] = {'q_id':question_id,'answer':answer,'question':question,'result':1,'analysis':analysis,'type':type,'youanswer':that.choise[index],'choices':choices,'stem':stem};
				}else{
				 newrecord[ind-1] = {'q_id':question_id,'answer':answer,'question':question,'result':0,'analysis':analysis,'type':type,'youanswer':that.choise[index],'choices':choices,'stem':stem};
				}
				
				// console.log(that.arranswer);
				// console.log(that.record);
				var num= 0;
				var nopay=[];
				for(var i=0;i<newaanswer.length;i++){
					if(newaanswer[i] != ''){
						num = parseInt(num)+1;
					}else{
						nopay = nopay.concat(i+1)
					}
				}
				
				if(!this.submitfalse){
					setTimeout(function(){
						if(num != that.item_count){
							if(Number(that.item_count)==Number(that.sort)){
								if(!that.noclick){
									that.nopare = nopay.toString(',');
									$('.noshower').fadeIn();
									$('.showerbottom').fadeOut();
									that.textnosub='查看未做题目';
								}
							}else{
							   that.sort = parseInt(that.sort)+1;
							   that.tapevery();
							}
						}else{
							that.textnosub='试卷已答完，点击提交试卷';
							$('.showerbottom').fadeOut();
							$('.shower').fadeIn();
						}
					},1000)
				}
				
			},
			
			tapevery(){
				var that = this;
// 				if(Number(that.item_count)==Number(that.sort)){
// 					that.nopay();
// 				}else{
				var num = Number(that.sort)-1;
				that.typestr = that.alltiarr[num].type;
				that.itemanswer = that.alltiarr[num];  //该试卷的解析  答案
				// }
			},
			
			// 多选
			choosemoreclick:function(index,ind,answer,question_id,analysis,question,type,choices,stem){
				
			},
			
			// 点击提交
			submit:function(){
				// console.log(888);
				var that = this;
				// 记录你的答案和正确答案
				window.sessionStorage.setItem('arr',JSON.stringify(that.arranswer));
				//记录题目
				window.sessionStorage.setItem('record',JSON.stringify(that.record));
				// 满分  分数线
				window.sessionStorage.setItem('testPaper',JSON.stringify(that.testPaper));
				that.$router.push({
					path: '/submit?testid='+that.test_id+'&gid='+that.gid+'&zbo='+that.zbo+'&id='+that.id+'',
				})
			},
			
			// 提交点击取消
			clear:function(){
				$('.showerbottom').fadeIn();
				$('.shower').fadeOut();
				this.submitfalse = true;
			},
			
			noshowerclick(){
				$('.noshower').fadeOut();
				$('.showerbottom').fadeIn();
			},
			
			// 点击底部提交
			submitbottom:function(){
				var that = this;
				var a=0,  //没有做题数量
				    b=0,  //做题数量
					arranlength=that.arranswer.arr.length,
					arranswer=that.arranswer.arr,
					nopay=[];
				for(var i=0;i<arranlength;i++){
					if(arranswer[i]==''){
						a++;
						nopay = nopay.concat(i+1)
					}else{
						b++
					}
				}
				if(a!=0||a!='0'){
					that.nopare = nopay.toString(',');
					$('.noshower').fadeIn();
					// $('.showerbottom').fadeOut();
					that.textnosub='查看未做题目';
				}else{
					// 记录你的答案和正确答案
					window.sessionStorage.setItem('arr',JSON.stringify(that.arranswer));
					//记录题目
					window.sessionStorage.setItem('record',JSON.stringify(that.record));
					// 满分  分数线
					window.sessionStorage.setItem('testPaper',JSON.stringify(that.testPaper));
					that.$router.push({
						path: '/submit?testid='+that.test_id+'&gid='+that.gid+'&zbo='+that.zbo+'&id='+that.id+'&url='+that.urlquery+'',
					})
				}
				
				
			},
			// 获取试卷
			allanswer(test_id) {
				// hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
			    var that = this;
				var thatstate = that.$store.state;
				this.axios({
					method:'GET',
					url:thatstate.url+'Xiaoqi/getTestpaper',
					params:{
						test_id:test_id
					}
				})
				.then((res)=>{
					// console.log(res);
					that.errcode = res.data.errcode;
					that.chenload=true;
					
					if(res.data.errcode == 0 || res.data.errcode == '0'){
						// console.log(8888)
						var testPaper = res.data.data;
						that.testPaper = testPaper;//这套试卷的全部信息
						that.item_count = testPaper.item_count;
						// console.log(that.item_count);
						for(var i = 0;i<that.item_count;i++){
							that.arranswer.arr[i] = '';
							that.record.answer[i] = '';
						}
						$('title').html(testPaper.name);
						that.everyanswery(test_id,1);
					}
				}).catch((err)=>{
				   console.log(err)
				})
			},
			// 获取每道题
			everyanswery(test_id,sort1){
				// hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
				// console.log(8898)
				var that = this;
				var thatstate = this.$store.state;
				this.axios({
					method:'GET',
					url:thatstate.url+'Xiaoqi/getItemAll',
					params:{
						test_id:test_id,
					},
				})
				.then((res)=>{
					if(res.data.errcode == 0 || res.data.errcode == '0'){
						var data = res.data.data;
						// console.log(data)
						that.alltiarr = data;
						// console.log(data);
						that.typestr = data[0].type;
						that.itemanswer = data[0];  //该试卷的解析  答案
					}
				}).catch((err)=>{
				   console.log(err);
				})
			},
			// 点击上一题
			leftitem:function(){
				var that = this;
				var sort = that.sort;
				if(sort==1||sort=='1'){
					layer.open({
						content: '已经是第一题',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
				}else{
					that.sort = parseInt(that.sort)-1;
					// that.everyanswery(that.test_id,that.sort);
					setTimeout(function(){
					  that.tapevery();
					},500)
				}
			},
			nopay(){
				var that = this;
				var a=0,  //没有做题数量
				    b=0,  //做题数量
					arranlength=that.arranswer.arr.length,
					arranswer=that.arranswer.arr,
					nopay=[];
				for(var i=0;i<arranlength;i++){
					if(arranswer[i]==''){
						a++;
						nopay = nopay.concat(i+1)
					}else{
						b++
					}
				}
				if(a!=0||a!='0'){
					that.nopare = nopay.toString(',');
					$('.noshower').fadeIn();
					$('.showerbottom').fadeOut();
					that.noclick=true;
					that.textnosub='查看未做题目';
				}
// 				console.log(a)
// 				console.log(b)
// 				console.log(nopay)
			},
			// 点击下一题
			rightitem:function(){
				var that = this;
				var sort = that.sort;
				if(sort==that.item_count){
					layer.open({
						content: '已经最后一题',
						skin: 'msg',
						time: 2 //1秒后自动关闭
					});
					// console.log(that.arranswer);
					that.nopay();
				}else{
					that.sort = parseInt(that.sort)+1;
					setTimeout(function(){
					  that.tapevery();
					},500)
				}
			},
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			var that = this;
			that.id = that.$route.query.id;   //课程id
			that.gid = that.$route.query.gid;    //班级id
			that.urlquery = that.$route.query.url;    //班级id
			// that.test_id = 314;    //试卷id
			that.test_id = that.$route.query.testid;    //试卷id
			that.zbo = that.$route.query.zbo;    //0回放  1直播
			// 获取试卷
			that.allanswer(that.test_id);
		}
	}
</script>

<style scoped="scoped">
.noanswer{
	text-align: center;
	font-size: .28rem;
	color: #333;
	margin-top: .2rem;
}
.qu p{
	display: inline-block !important;
}
.answer-top{
	margin: .2rem 0 .6rem;
	font-size: .3rem;
	padding: 0 .3rem;
}
.answer-top-left{
	color: #FE2326;
}
.answer-top-right{
	color: #333333;
}
.allanswer{
	padding-bottom: 2.2rem;
}
.answer .answer-question{
	color: #333;
	font-size: .3rem;
	padding: 0 .3rem;
}
.answer-every{
	color: #333;
	font-size: .3rem;
}
.answer-choose{
	padding: 0 .3rem;
}
.answer-choose-every{
	width: 100%;
	margin-top: .3rem;
}
.answer-every-click{
	font-size: .3rem;
	width: .5rem;
	height: .5rem;
	border-radius:50%;
	border:1px solid #CCCCCC;
	line-height: .5rem;
	color: #333333;
	text-align: center;
}
.answer-choose-active{
	color: #fff !important;
	background: #3877F6 !important;
}
.answer-every{
	width: 88%;
	margin-left: .2rem;
}
.answer-big-que{
	background: #FFF4F4;
	padding: .3rem;
	color: #333;
	font-size: .3rem;
	margin-bottom: .4rem;
}
.answer-B1 .answer-choose-top{
	padding: 0.3rem !important;
	background: #FFF4F4;
	margin-bottom: .4rem;
}
.answer-B1 .answer-choose-top .answer-choose-every{
	/* padding-left: .3rem; */
	/* padding-top: .3rem; */
}
.answer-B1 .answer-choose-every{
	width: auto;
}
.answer-ch-click .answer-every-click{
	margin-right: .4rem;
}
.answer-bottom{
	width: 100%;
	height: 1rem;
	box-shadow:0px -3px 5px 0px rgba(71,68,80,0.06);
	padding: .3rem .6rem;
	position: fixed;
	bottom: 0;
}
.answer-bottom .bottom-left,.answer-bottom .bottom-right{
	width: .22rem;
	height: .44rem;
}
.answer-bottom img{
	width: 100%;
	height:100%;
}

/*提交*/
.shower,.noshower{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background: rgba(0,0,0,.6);
	z-index: 9;
	display: none;
}

.butorder{
	height: 1rem;
	width: 100%;
	line-height: 1rem;
	text-align: center;
	color: #333;
	font-size: .3rem;
	border-top: 1px solid #ededed;
}

.show-con{
	width: 5.6rem;
	margin: auto;
	position: relative;
	top: 2.98rem;
	z-index: 99;
	background: #fff;
	border-radius: 0.08rem;
}

.show-con h1{
 	color: #3877F6;
 	font-size: .36rem;
 	padding: .58rem .34rem 0;
 	text-align: center;
	font-weight: 600;
 }

.show-con p{
  	text-align: center;
  	padding:.3rem .3rem .3rem .36rem;
  	color: #999999;
  	font-size: .3rem;
	word-wrap:break-word;
	max-height: 3rem;
	overflow-y: scroll;
  }

.show-con .butac{
	border-top: 1px solid #D2D3D5;
}

.butac .but{
	float: left;
	width: 49%;
	height: 1rem;
	line-height: 1rem;
	font-size: .3rem;
	text-align: center;
}

.butac .no{
	border-right: 1px solid #D2D3D5;
	color: #999999;
}

.butac .yes{
	color: #333;
}


/*底部提交*/
.showerbottom{
  width: 100%;
  position: fixed;
  bottom: .98rem;
  height: 2.06rem;
  background: #fff;
  display: none;
}

.showerbottom .showercontent{
	width: 92%;
	margin: auto;
	height: .88rem;
	line-height: .88rem;
	background: #3877F6;
	color: #FFFFFF;
	font-size: .36rem;
	margin-top: .5rem;
	text-align: center;
	border-radius: .44rem;
}
.nohave{
	width: 100%;
	color: #333;
	font-size:.28rem;
	text-align: center;
	margin-top: .2rem;
}
</style>
